<template>
	<div>
		<div class="orderKind">
			<ul>
				<li>
					<span class="iconfont icon-daifukuan" style="color:blue"></span>
					<p class="orderD">待付款</p>
				</li>
				<li><span class="iconfont icon-zhifuchaoshi"></span>
					<p class="orderD">支付超时</p></li>
				<li><span class="iconfont icon-daipingjia01"></span>
					<p class="orderD">待评价</p></li>
				<li><span class="iconfont icon-tuikuan"></span>
					<p class="orderD">退款</p></li>
				<li><span class="iconfont icon-weibiaoti2fuzhi07"></span>
					<p class="orderD">全部订单</p></li>
			</ul>
		</div>
		<div class="content">
			<ul>
				<li v-for="item of orderingList" :key='item.id'>
					<div class="message">
						<span class="null"></span>
						<span class="hostle">{{item.title}}</span>
						<span class="state">{{item.subtype}}</span>
					</div>
					<div class="orderMain">
						<p class="orderNum">{{item.genres}}</p>
						<p class="orderTime">使用时间：<span class="orderDate">{{item.year}}至{{item.year}}</span></p>
						<p class="orderMoney">总价：￥<span class="orderMon">{{item.rating.average}}</span></p>
					</div>
					<div class="orderSend">
						<span class="orderSe">确认支付</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return{
			orderingList:[]
		}
	},
	created(){
		fetch('/daxun/index').then(res => res.json())
      .then(data => {
        console.log(data)
        this.orderingList = data
      })
	}
}	
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.orderKind{
	@include rect(100%, auto);
	@include flexbox();
	justify-content:center;
 ul{
 	@include rect(90%, auto);
 	@include flexbox();
 	justify-content:space-around;
	li {
	    .orderD{
	      font-size:12px;
	    }
		.iconfont{
			font-size:30px;
			color:blue;
		}
	}
   }
}	

</style>
